<template>
  <div>
    <el-form label-position="left" ref="addFormRef" :model="addForm" label-width="100px">
      <el-form-item label="海报上传" style="margin-bottom: 40px">
        <el-upload ref="upload" :auto-upload="false" :on-change="uploadChange" :on-progress="uploadPreview"
          :on-success="uploadSuccess" :on-error="uploadError" :show-file-list="false" :on-exceed="uploadExceed"
          action="http://localhost:9999/upload?flag=5" list-type="picture-card">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button style="margin-top: 20px" type="primary" @click="uploadImg">点击上传</el-button>
      </el-form-item>

      <el-form-item label="电影名称" prop="filmName">
        <el-input v-model="addForm.filmInfo.filmName"></el-input>
      </el-form-item>
      <el-form-item label="电影英文名称" prop="filmEnName">
        <el-input v-model="addForm.filmInfo.filmEnName"></el-input>
      </el-form-item>
      <el-form-item label="影片导演" prop="filmDirector">
        <el-input v-model="addForm.directorList" placeholder="多个名称请用英文,进行分割"></el-input>
      </el-form-item>
      <el-form-item label="影片主演" prop="filmActor">
        <el-input v-model="addForm.actorList" placeholder="多个名称请用英文,进行分割"></el-input>
      </el-form-item>
      <el-form-item label="影片时长" prop="filmLength">
        <el-input v-model="addForm.filmInfo.filmLength" placeholder="默认单位：分钟"></el-input>
      </el-form-item>
      <el-form-item label="影片评分" prop="filmScore">
        <el-input v-model="addForm.filmInfo.filmScore" placeholder="满分10分，格式：0.0"></el-input>
      </el-form-item>
      <el-form-item label="影片类型" prop="filmCategory">
        <el-checkbox-group v-model="cateChecked">
          <el-checkbox v-for="(item, i) in cateList" :key="i" :label="item.cateName" border size="medium"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="影片状态" prop="filmStatus">
        <el-dropdown placement="bottom" @command="clickStatus">
          <el-input v-model="addForm.filmInfo.filmStatus"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="上映">上映</el-dropdown-item>
            <el-dropdown-item command="下架">下架</el-dropdown-item>
            <el-dropdown-item command="待上映">待上映</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="上映时间" prop="filmShowTime">
        <el-date-picker v-model="addForm.filmInfo.filmShowTime" type="date" placeholder="选择日期" :clearable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="年代" prop="filmAge">
        <el-input v-model="addForm.filmInfo.filmAge" placeholder="示例：2021"></el-input>
      </el-form-item>
      <el-form-item label="区域">
        <el-dropdown placement="bottom" @command="clickArea">
          <el-input v-model="areaName"></el-input>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in areaList" :key="item.fareaId" :command="item">{{ item.fareaName
                }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>

        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const addForm = reactive({
  filmInfo: {
    filmStatus: "",
  },
  actorList: "",
  directorList: "",
})
let addFormRef = ref()
let fileList = reactive([])
let imageUrl = ref("")
let areaList = reactive([])
let areaName = ref("")
let filmDirector = ref("")
let filmActor = ref("")
let cateList = reactive([])
let cateChecked = reactive([])

onMounted(() => {
  getAreaList();
  getCateList();
  let id = route.query.id;
  if (id) {
    getFilmById(id);
  }
})
let upload = ref()

function clickArea(command) {
  console.log('lll', command)
  addForm.filmInfo.filmArea = command.fareaId;
  areaName.value = command.fareaName;
}

function uploadImg() {
  upload.value.submit();
}
function uploadChange(file, fileList) {
  imageUrl.value = file.url;
}
function uploadSuccess(res, file) {
  console.log(res);
  console.log(file);
  ElMessage({
    message: res.message,
    type: "sucess",
  });
  addForm.filmInfo.filmPicture = file.response.data.url;
}

function clickStatus(command) {
  addForm.filmInfo.filmStatus = command;

}

async function getAreaList() {
  const { data: res } = await axios.get("/filmarea/getList");
  areaList = res.data;
  //响应式
  console.log(res);
}
async function getCateList() {
  const { data: res } = await axios.get("/category/getList");
  if (res.code != 200) {
    ElMessage({
      message: res.message,
      type: "sucess",
    });
  } else {
    cateList = res.data;
  }
}
async function submitForm() {
  if (route.query.id) {
    const { data: res } = await axios.post(
      "/filminfo/editFilm",
      addForm.filmInfo,
      {
        params: {
          actorNames: addForm.actorList,
          directorNames: addForm.directorList,
          filmStyles: cateChecked.join(","),
        },
      }
    );
    if (res.code != 200) {
      ElMessage({
        message: res.message,
        type: "error",
      });
    } else {
      router.push("/film");
    }
  } else {

    const { data: res } = await axios.post(
      "/filminfo/addFilm",
      addForm.filmInfo,
      {
        params: {
          actorNames: addForm.actorList,
          directorNames: addForm.directorList,
          filmStyles: cateChecked.join(","),
        },
      }
    );
    if (res.code != 200) {
      ElMessage({
        message: res.message,
        type: "error",
      });
    } else {
      router.push("/film");
    }
  }
}
function resetForm() {
  addFormRef.value.resetFields();
  areaName.value = "";
  imageUrl.value = "";
}
async function getFilmById(id) {
  const { data: res } = await axios.get("/filminfo/getFilmById", {
    params: { id: id },
  });
  if (res.code != 200) {
    ElMessage({
      message: res.message,
      type: "sucess",
    });
  } else {
    addForm.filmInfo = res.data;
    imageUrl.value = res.data.filmPicture;

    var cateArray = [];
    var actorArray = [];
    var directorArray = [];
    res.data.categoryList.forEach((element2) => {
      cateArray.push(element2.cateName);
    });
    res.data.actorList.forEach((element2) => {
      actorArray.push(element2.actorName);
    });
    res.data.directorList.forEach((element2) => {
      directorArray.push(element2.directorName);
    });
    cateChecked = cateArray;
    addForm.actorList = actorArray.reverse().join(",");
    addForm.directorList = directorArray.reverse().join(",");

    areaName.value = res.data.area.fareaName;
    addForm.filmInfo.filmArea = res.data.area.fareaId;
  }
}


</script>

<style lang="less" scoped>
.avatar {
  width: 140px;
  height: 166px;
}

/deep/.el-input__inner {
  width: 300px;
}

.el-dropdown-menu {
  width: 300px;
}

.el-checkbox {
  margin-right: 0;
}
</style>
